<script setup lang="js">
import { reactive ,ref} from 'vue';
import { queryAllCustomer, deleteCustomerById,reviseCustomerInfo } from '@/api/customerApi';
import { queryAllRoomByFloor, queryKxcwByRoomNo } from '@/api/bedApi'
import { saveCustomer } from '../../api/customerApi';
import { ElMessage } from 'element-plus';

//-:存储所有的客户信息
let tableData = reactive([])

// 新增弹窗显示控制变量  // [!code ++]
const reviseDialogvisible = ref(false); // [!cod

//-传递给后端的数据格式
let queryParam = reactive({
  pageInfoVo: {
    currentPage: 1,
    pageSize: 5,
    total: 0,
    pageNum: 0
  },
  customer: {
    customerName: "",
  }
})

//-:查询表格中所有的数据
function getTableData() {
  queryAllCustomer(queryParam)
    .then(res => {
      if (res.code == 200) {
        //-:分页数据的设置
        queryParam.pageInfoVo.currentPage = res.data.currentPage
        queryParam.pageInfoVo.pageSize = res.data.pageSize
        queryParam.pageInfoVo.total = res.data.total
        queryParam.pageInfoVo.pageNum = res.data.pageNum
        tableData.splice(0, tableData.length)
        tableData.push(...res.data.data)
      }
    })
}

//-调用函数
getTableData()

//-:分页事件
//-:val:表示点击的页码数
function handleCurrentChange(val) {
  queryParam.pageInfoVo.currentPage = val
  //-重新获取表格中的信息
  getTableData();
}

//-:点击上一页
//-:val:表示上一页的页码
function handlePrevClick(val) {
  queryParam.pageInfoVo.currentPage = val
  //-重新获取表格中的信息
  getTableData();
}

//-：点击下一页
function handleNextClick(val) {
  queryParam.pageInfoVo.currentPage = val
  //-重新获取表格中的信息
  getTableData();
}

//-:查询事件
function queryCustomer() {
  getTableData();
}

//-：登记入住对话框的数据
let djDialog = reactive({
  //-是否显示
  dialogVisible: false,
  //-:对话框中的数据
  customerForm: {
    id: "",
    bedId: "",
    bloodType: "O",
    buildingNo: "606", //楼号固定606
    contactTel: "",
    customerAge: "",
    customerName: "",
    customerSex: "0",
    roomNo: "",
    idCard: "",
    psychosomaticState: "",
    familyMember: "", //家属
    filePath: "@/assets/tou.png", //头像路径固定
    birthday: "",
    checkinDate: "",
    expirationDate: "",
    roomFloor: '一楼'
  },
  roomList: [],
  bedList: [],
  sex: [
    {
      value: "0",
      label: '男'
    },
    {
      value: "1",
      label: '女'
    }
  ]
})

//-:触发登记案例的事件
function fun_dj() {
  djDialog.dialogVisible = true
  //-：获取登记窗口中的默认数据
  //-:获取一楼对应的房间列表
  getAllRoomsByFloor();
}

//-获取指定楼层的房间列表
function getAllRoomsByFloor() {
  queryAllRoomByFloor({ "floor": djDialog.customerForm.roomFloor })
    .then(res => {
      djDialog.roomList.splice(0, djDialog.roomList.length)
      djDialog.roomList.push(...res.data.roomList)
      djDialog.customerForm.roomNo = "";
      djDialog.customerForm.bedId = "";
    })
    .catch(err => {
      console.log(err)
    })
}

//-通过房间号，查询空闲的床位
function getBed() {
  //-:清空之前存储的床位信息
  djDialog.customerForm.bedId = ""
  //-:通过房间号，查询空闲床位
  queryKxcwByRoomNo({ "roomNo": djDialog.customerForm.roomNo })
    .then(res => {
      console.log(res)
      djDialog.bedList.splice(0, djDialog.bedList.length)
      djDialog.bedList.push(...res.data)
    })
}

//-登记信息的保存
function fun_djsave() {
    if(djDialog.isEdit == false){
        saveCustomer(djDialog.customerForm)
        .then(res => {
            if (res.code == '200') {//
                //-提示信息
                ElMessage({
                    showClose: true,
                    message: '恭喜您，添加成功',
                    type: 'success'
                })
                //-隐藏登记的对话框
                djDialog.dialogVisible = false
                //-:查询成功之后，重新查询数据
                getTableData()
            } else {
                alert(res.message)
            }
        })
    }else{
      reviseCustomerInfo(djDialog.customerForm)
        .then(res => {
            if(res.code == 200){
                ElMessage({
                    showClose: true,
                    message: '恭喜您，修改成功',
                    type: 'success'
                })
                //-隐藏登记的对话框
                djDialog.dialogVisible = false
                //-:查询成功之后，重新查询数据
                getTableData()
            }else{
                alert(res.message)
            }
        })
    }
}
/*
// 处理点击确定按钮的操作
const handleSaveConfirm = () => {
  fun_djsave(); 
  getTableData();
  djDialog.dialogVisible = false // 关闭弹窗
};*/

//-:删除某个客户
function delCustomerById(id) {
  deleteCustomerById({ "customerId": id })
    .then(res => {
      if (res.code == 200) {
        //-提示信息
        ElMessage({
          showClose: true,
          message: '恭喜您，删除成功',
          type: 'success'
        })
        //-:查询成功之后，重新查询数据
        getTableData();
      } else {
        alert(res.message)
      }
    })
}
/*
//-: 存储弹窗显示的状态
let reviseDialogvisible = reactive({
  visible: false // 控制弹窗显示的状态
});

//修改信息中弹出层的信息显示
let reviseData = reactive({
  dialogVisible: false,
  reviseForm: {
    // 显示的属性内容
    customerName: "",
    customerAge: "",
    customerSex: "",
    birthday:"",
    idCard:"",
    bloodType:"",
    familyMember:"",
    buildingNo:"606",
    roomNo:"",
    bedNo:"",
    checkinDate:"",
    expirationDate:"",
    contactTel:"",
    psychosomaticState:""
  }
});
//-: 修改信息的保存
function reviseSave() {
  // 调用交换床位的后端 API
  reviseCustomerInfo({
    id: reviseData.reviseForm.id,
    customerSex: reviseData.reviseForm.customerSex,
    birthday: reviseData.reviseForm.birthday,
    psychosomaticState: reviseData.reviseForm.psychosomaticState
  })
    .then(res => {
      if (res.success) {
        reviseDialogvisible.visible = false; // 关闭弹窗
        ElMessage.success('修改信息成功');
        // 重新查询数据
        getTableData();
      } else {
        ElMessage.error('修改信息失败');
      }
    })
    .catch(err => {
      console.error('修改信息请求失败', err);
      ElMessage.error('系统错误，请稍后再试');
    });
}

// 处理点击保存按钮的操作
const handleConfirm = () => {
  reviseSave();
  reviseDialogvisible.visible = false; // 关闭弹窗
};

// 处理点击修改按钮的操作
const handleRevise = (customer) => {
  // 将选择的客户信息填充到表单
  reviseData.reviseForm = { ...customer };
  reviseDialogvisible.visible = true; // 打开弹窗
};
*/
//床位修改-显示
function revise(row){
  reviseDialogvisible.value = true;
  reviseData.reviseForm.id=row.id;
  reviseData.reviseForm.customerName=row.customerName;
  reviseData.reviseForm.customerSex="";
  reviseData.reviseForm.customerAge=row.customerAge;
  reviseData.reviseForm.birthday="";
  reviseData.reviseForm.idCard=row.idCard;
  reviseData.reviseForm.bloodType=row.bloodType;
  reviseData.reviseForm.familyMember=row.familyMember;
  reviseData.reviseForm.buildingNo=row.buildingNo;
  reviseData.reviseForm.roomNo=row.roomNo;
  reviseData.reviseForm.bedNo=row.bedNo;
  reviseData.reviseForm.checkinDate=row.checkinDate;
  reviseData.reviseForm.expirationDate=row.expirationDate;
  reviseData.reviseForm.contactTel=row.contactTel;
  reviseData.reviseForm.psychosomaticState="";
}
//修改信息中弹出层的信息显示
let reviseData = reactive({
  reviseForm: {
    // 显示的属性内容
    customerName: "",
    customerSex: "",
    bedDetails: "",
    startDate: "",
    // 提交参数属性
    id: "",
    customerId: "",
    endDate: "",
  }
});
// 修改信息的存储
function reviseSave() {
  reviseDialogvisible.value = true;
   // 调用交换床位的后端 API
   reviseCustomerInfo({
    id: reviseData.reviseForm.id,
    birthday: reviseData.reviseForm.birthday
  })
    .then(res => {
      if (res.success) {
        reviseDialogvisible.value = false;
        this.$message.success('修改信息成功');
        getTableData();
      } else {
        this.$message.error('修改信息失败');
      }
    })
    .catch(err => {
      console.error('修改信息请求失败', err);
      this.$message.error('系统错误，请稍后再试');
    });
}
// 处理点击保存按钮的操作
const handleSaveConfirm = () => {
  reviseSave(); 
  getTableData();
  reviseDialogvisible.value = false; // 关闭弹窗
};
</script>

<template>
  <div style="margin-left: 70px;">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">客户管理</el-breadcrumb-item>
      <el-breadcrumb-item>入住登记</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  
  <div class="common-layout" style="overflow-x: hidden;">
    <!--外层容器-->
    <el-container style="margin-top: 25px;">
      <!--顶部容器-->
      <el-header>
        <div style="margin-left: 50px">
          <el-row>
            <el-col :span="5">
              <el-form-item label="姓名：">
                <el-input clearable v-model="queryParam.customer.customerName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-button @click="queryCustomer" type="primary">查询</el-button>
            </el-col>
            <el-col :span="3">
              <el-button @click="fun_dj" type="success">登记</el-button>
            </el-col>
          </el-row>
        </div>
      </el-header>
      
      <el-divider style="margin-left: 60px;"></el-divider>
      
      <!--主要区域容器-->
      <el-main>
        <el-table :data="tableData" stripe style="width: 95%;margin-left: 24px;">
          <el-table-column align="center" type="index" label="序号" width="100" />
          <el-table-column align="center" prop="customerName" label="客户姓名" width="150" />
          <el-table-column align="center" prop="bloodType" label="血型" width="100" />
          <el-table-column align="center" prop="contactTel" label="联系电话" width="150" />
          <el-table-column align="center" prop="customerAge" label="年龄" width="100" />
          <el-table-column align="center" prop="customerSex" label="性别" width="100">
            <template #default="scope">
              {{ scope.row.customerSex==0?'男':'女' }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="familyMember" label="家属" width="150" />
          <el-table-column align="center" prop="idCard" label="身份证号" width="160" />
          <el-table-column align="center" prop="buildingNo" label="所属楼房" width="150" />
          <el-table-column align="center" prop="roomNo" label="房间号" width="150" />
          <el-table-column align="center" prop="bedNo" label="床号" width="150" />
          <el-table-column align="center" prop="birthday" label="出生日期" width="150" />
          <el-table-column align="center" fixed="right" label="操作" width="150">
            <template #default="scope">
              <el-button @click="delCustomerById(scope.row.id)" type="primary" size="small">删除</el-button>
              <el-button @click="revise(scope.row)" type="primary" size="small">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <div style="margin-top: 20px;">
          <el-pagination 
            style="position: fixed; margin-left: 40px;margin-bottom: 8px;"
            background
            :page-size="queryParam.pageInfoVo.pageSize"
            :total="queryParam.pageInfoVo.total"
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
            @prev-click="handlePrevClick"
            @next-click="handleNextClick">
          </el-pagination>
        </div>
      </el-main>
    </el-container>

    <!--弹出层：入住登记-->
    <el-dialog
      title="入住登记"
      v-model="djDialog.dialogVisible"
      width="60%"
      align-center
      draggable
    >
      <el-divider border-style="double" style="margin:0;margin-bottom:20px"></el-divider>
      
      <el-form
        label-position="right"
        label-width="auto"
        style="max-width:800px;margin:20px auto"
        class="demo-form-inline"
        ref="customerForm"
        :inline="true"
        :model="djDialog.customerForm"
        :rules="rules"
      >
        <el-form-item label="客户姓名：" prop="customerName">
          <el-input placeholder="输入[客户姓名]" v-model="djDialog.customerForm.customerName" />
        </el-form-item>
        
        <el-form-item label="楼栋：" prop="buildingNo">
          <el-input readonly v-model="djDialog.customerForm.buildingNo" />
        </el-form-item>
        
        <el-form-item label="年龄：" prop="customerAge">
          <el-input v-model="djDialog.customerForm.customerAge" />
        </el-form-item>
        
        <el-form-item label="楼层" prop="roomFloor">
          <el-select
            v-model="djDialog.customerForm.roomFloor"
            placeholder="请选择楼层"
            style="width:190px"
            @change="getAllRoomsByFloor"
          >
            <el-option label="一楼" value="一楼"></el-option>
            <el-option label="二楼" value="二楼"></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="房间号： " prop="roomNo">
          <el-select
            v-model="djDialog.customerForm.roomNo"
            style="width:190px"
            placeholder="请选择房间号"
            @change="getBed"
          >
            <el-option
              v-for="item in djDialog.roomList"
              :key="item.roomNo"
              :label="item.roomNo"
              :value="item.roomNo"
            ></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="性别：" prop="customerSex">
          <el-select
            v-model="djDialog.customerForm.customerSex"
            style="width:200px"
            placeholder="性别"
          >
            <el-option
              v-for="item in djDialog.sex"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="床位号： " prop="bedId">
          <el-input readonly v-if="isShow" v-model="djDialog.customerForm.bedId" />
          <el-select 
            v-if="!isShow"
            style="width:200px"
            v-model="djDialog.customerForm.bedId"
            placeholder="请选择床位"
          >
            <el-option
              v-for="item in djDialog.bedList"
              :key="item.bedNo"
              :label="item.bedNo"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="出生日期： " prop="birthday">
          <el-date-picker
            @change="getAge"
            style="width:200px"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
            v-model="djDialog.customerForm.birthday"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        
        <el-form-item label="入住时间： " prop="checkinDate">
          <el-date-picker
            style="width:200px"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
            v-model="djDialog.customerForm.checkinDate"
            type="date"
            :disabled-date="disabledDate"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        
        <el-form-item label="身份证号：" prop="idCard">
          <el-input v-model="djDialog.customerForm.idCard" />
        </el-form-item>
        
        <el-form-item label="合同到期时间： " prop="expirationDate">
          <el-date-picker
            style="width:200px"
            v-model="djDialog.customerForm.expirationDate"
            type="date"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
            :disabled-date="disabledDate0"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        
        <el-form-item label="血型：" prop="bloodType">
          <el-input v-model="djDialog.customerForm.bloodType" />
        </el-form-item>
        
        <el-form-item label="联系电话：" prop="contactTel">
          <el-input v-model="djDialog.customerForm.contactTel" />
        </el-form-item>
        
        <el-form-item label="家属：" prop="familyMember">
          <el-input v-model="djDialog.customerForm.familyMember" />
        </el-form-item>
        
        <el-form-item label="身心状况： " prop="psychosomaticState">
          <el-input v-model="djDialog.customerForm.psychosomaticState" />
        </el-form-item>
      </el-form>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="djDialog.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSaveConfirm">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 弹出层：信息修改 -->
    <el-dialog title="信息编辑" v-model="reviseDialogvisible" style="margin-top: 45px;">
      <el-divider border-style="double" style="margin-top: 0px;"></el-divider>
      <el-form
        label-position="right"
        label-width="auto"
        style="max-width: 800px;margin:20px auto"
        class="demo-form-inline"
        :inline="true"
        :model="reviseData.reviseForm"
      >
        <el-form-item label="客户姓名：" prop="customerName" style="margin-left: 110px;">
          <el-input readonly v-model="reviseData.reviseForm.customerName"></el-input>
        </el-form-item>
        <el-form-item label="年龄：" prop="customerAge" style="margin-left: 110px;">
          <el-input readonly v-model="reviseData.reviseForm.customerAge"></el-input>
        </el-form-item>
        <el-form-item label="性别：" prop="customerSex" style="margin-left: 110px;">
          <el-input readonly v-model="reviseData.reviseForm.customerSex" :value="reviseData.reviseForm.customerSex == 0 ? '男' : '女'"></el-input>
        </el-form-item>
        <el-form-item label="出生日期：" prop="birthday" style="margin-left: 110px;">
          <el-date-picker
            v-model="reviseData.reviseForm.endDate"
            style="width:197px"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="身份证号：" prop="idCard" style="margin-left: 110px;">
          <el-input readonly v-model="reviseData.reviseForm.idCard"></el-input>
        </el-form-item>
        <el-form-item label="血型：" prop="bloodType" style="margin-left: 110px;">
          <el-input readonly v-model="reviseData.reviseForm.bloodType"></el-input>
        </el-form-item>
        <el-form-item label="家属：" prop="familyMember" style="margin-left: 110px;">
          <el-input readonly v-model="reviseData.reviseForm.familyMember"></el-input>
        </el-form-item>
        <el-form-item label="楼栋：" prop="buildingNo" style="margin-left: 110px;">
          <el-input readonly v-model="reviseData.reviseForm.buildingNo"></el-input>
        </el-form-item>
        <el-form-item label="房间号：" prop="roomNo" style="margin-left: 110px;">
          <el-input readonly v-model="reviseData.reviseForm.roomNo"></el-input>
        </el-form-item>
        <el-form-item label="床位号：" prop="bedNo" style="margin-left: 110px;">
          <el-input readonly v-model="reviseData.reviseForm.bedNo"></el-input>
        </el-form-item>
        <el-form-item label="入住时间：" prop="checkinDate" style="margin-left: 110px;">
          <el-input readonly v-model="reviseData.reviseForm.checkinDate"></el-input>
        </el-form-item>
        <el-form-item label="合同到期时间：" prop="expirationDate" style="margin-left: 110px;">
          <el-input readonly v-model="reviseData.reviseForm.expirationDate"></el-input>
        </el-form-item>
        <el-form-item label="联系电话：" prop="contactTel" style="margin-left: 110px;">
          <el-input readonly v-model="reviseData.reviseForm.contactTel"></el-input>
        </el-form-item>
        <el-form-item label="身心状态：" prop="psychosomaticState" style="margin-left: 110px;">
          <el-input readonly v-model="reviseData.reviseForm.psychosomaticState"></el-input>
        </el-form-item>
      </el-form>
      <el-divider border-style="double" style="margin: 0;"></el-divider>
      <div slot="footer" class="dialog-footer" style="margin-top:15px;margin-left: 550px;">
        <el-button @click="reviseDialogvisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSaveConfirm">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="css" scoped>
</style>